<template>
  <Table2 :columns="columnsDef" :data="dataList" @on-selection-change="onSelectionChange"
          @on-row-click="onRowClick"></Table2>
</template>
<script>
import Table2 from '@/views/components/data-table/Table2.vue'

export default {
  name: 'stretchtable',
  components: {
    Table2
  },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    /* 设定了哪些属于伸缩范围内的列，可以显示，也可以消失 */
    stretchColums: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    data(newVal) {
      this.dataList = newVal;
    },
    columns(newVal) {
      this.columnsDef = newVal;
    },
    screenWidth(newVal) {
      if (newVal < 720) {
        var [...copyColumnsDef] = this.columns;
        this.stretchColums.forEach((key) => {
          copyColumnsDef.splice(copyColumnsDef.findIndex(it => it.key === key), 1);
        })
        this.columnsDef = copyColumnsDef;
      } else {
        this.columnsDef = this.columns;
      }
    }
  },
  data() {
    return {
      screenWidth: 0,
      columnsDef: [],
      dataList: []
    }
  },
  created: function () {
    /* 内容页面的宽度计算 */
    this.screenWidth = window.innerWidth;
  },
  mounted() {
    window.onresize = () => { /* 内容页面的宽度计算 */
      return (() => {
        this.screenWidth = window.innerWidth;
      })()
    }
  },
  beforeDestroy() {

  },
  methods: {
    onSelectionChange(selection) {
      this.$emit('on-selection-change', selection);
    },
    onRowClick(val) {
      this.$emit("on-row-click", val);
    }
  }
}
</script>